var pad = '/m/';
var faqs = {};
var latitude = longitude = 0;

$(document).delegate("#start", "pagecreate", function() {

		if (Modernizr.geolocation) {
			navigator.geolocation.getCurrentPosition(tellLocation);
		}
		else {
			alert("geolocation not supported; we can't be at your service.");
			// geolocation is not supported in this browser
		}
	
		$('#nav2Map').bind('tap', function() {
			openMapView();
		});
		
		$('#nav2List').bind('tap', function() {
		});
		
		$(document).bind( "pagechange", function( event, data ){	
			console.log(data.options);
			console.log(event);
		});

});




function tellLocation(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	//alert(latitude + ',' + longitude);
	$.get('search.php', '&latitude='+latitude+ '&longitude=' +longitude,showFaq);	
//	$('span#locatie').text(latitude +',' + longitude);
	
	myGeo = new google.maps.Geocoder();
	myGeo.geocode({latLng: new google.maps.LatLng(latitude,longitude)}, zegHetVoort);
	
	$('input[name=latitude]').val(latitude);
	$('input[name=longitude]').val(longitude);
	
}

var zegHetVoort = function(results, status) {
	var i =0, j = 0;
	var name = '', del = '';;
	if (results.length > 0)
			while (i<1) {
				while (j < results[i].address_components.length) {
					name += del + results[i].address_components[j].short_name ;
					del = ', ';
					j++;
				}
				i++;
			}			
	$('span#locatie').text(name);
	$('input[name=location]').val(name);

}

function showFaq(data) {
	//alert(data);
	var themes = "abcde";
	var t = 0;
	$('#loader').remove();
	var obj= jQuery.parseJSON(data);
	faqs = obj.faqs;
	//console.log(faqs);
	var faqStr = '<div data-role="collapsible-set">';	
	for (i in faqs) {
	    
		faqStr += '<div data-theme="' + themes.charAt(t) +'" data-role="collapsible">';
		faqStr += '<h3 id=f_'+ faqs[i][0].id+'>' + faqs[i][0].title +'<br>';	
		faqStr += faqs[i][0].location.split(',')[1] + ' ' + faqs[i][0].distance +'m</h3>';
		faqStr += '<p>';
		var j = 0;
		while (j< faqs[i].length) {
			faqStr += '<div data-theme="'+ themes.charAt(t) +'" data-content-theme="'+ themes.charAt(t) +'" data-role="collapsible">';
			faqStr += '<h3>'+ faqs[i][j].question + '</h3>';
			faqStr += '<p>V: <em>'+ faqs[i][j].question;
			faqStr += '</em> A: '+ faqs[i][j].answer + '</p>';
			faqStr += '</div>';
			j++;
		}
		faqStr += '</p>'
		faqStr += '</div>';
		t++;
		if (t > themes.length-1)
			t=0;
	}
	var i=0, prevId=999;
	faqStr += '</div>';
	$('#faqcontent').append(faqStr).trigger('create');
	//alert(faqStr);
	//openMapView();
}

function doNothing() {
	alert('error');
}
function openMapView() {
	var h = $(document).height() - $(document).height()/20;
	//console.log(h);
	$('#mapcontent').css('height', h +'px');
	$('#mapcontent').gmap({'zoom' : 15, 'callback': function() {
	var self = this;
	self.getCurrentPosition(function(position, status) {
		if ( status === 'OK' ) {
			var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

			self.addMarker({'position': clientPosition, 'bounds': true});
			self.addShape('Circle', { 
				'strokeWeight': 0, 
				'fillColor': "#008595", 
				'fillOpacity': 0.25, 
				'center': clientPosition, 
				'radius': 300, 
				'clickable': false 
			});
			//console.log('print markers');
			for (i in faqs) {
				var m = faqs[i][0];
				console.log(i);
				var marker = $('#mapcontent').gmap('addMarker', { 
					'position': new google.maps.LatLng(m.latitude, m.longitude), 
					'bounds': true ,
					'blabla': m.title,
					'icon': new google.maps.MarkerImage("question.png")
				});
				
				marker.click(function() {
				    console.log(m);
					$('#mapcontent').gmap('openInfoWindow', {'content': this.blabla },this);
				});
			}
			//console.log('triggerResize');
			$('#mapcontent').triggerEvent('resize');
			self.get('map').setZoom(16);
		}
	});  
 
}});
}
